<template>
    <div>
        <h1>优惠卷页面</h1>
        <table class="table table-bordered" border="1px">
            <tbody>
                <tr>
                    <td>优惠卷类型</td>
                    <td>优惠卷标题</td>
                    <td>优惠卷副标题</td>
                    <td>图片</td>
                    <td>库存</td>
                    <td>限领个数</td>
                    <td>使用条件</td>
                    <td>开始时间</td>
                    <td>结束</td>
                    <td>适用业务</td>
                    <td>使用须知</td>
                    <td>适用门店</td>
                    <td>服务电话</td>
                    <td>优惠卷颜色</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="a in info.list">
                    <td>
                        <span v-if="a.Distype == 1">代金券</span>
                        <span v-if="a.Distype == 2">折扣券</span>
                        <span v-if="a.Distype == 3">兑换卷</span>
                    </td>
                    <td>{{ a.Title }}</td>
                    <td>{{ a.SubTitle }}</td>
                    <td><img :src="a.Photo" width="60px" height="45px"></td>
                    <td>{{ a.Count }}</td>
                    <td>{{ a.PeopleCount }}</td>
                    <td>{{ a.PayMoney }}</td>
                    <td>{{ moment(a.BeginTime).format('YYYY-MM-DD') }}</td>
                    <td>{{ moment(a.EndTime).format('YYYY-MM-DD') }}</td>
                    <td>{{ a.Service }}</td>
                    <td>{{ a.Notice }}</td>
                    <td>{{ a.ShopName }}</td>
                    <td>{{ a.Phone }}</td>
                    <td>{{ a.Color }}</td>
                    <td>{{ a.State == 1 ? "启用" : "禁用" }}</td>
                    <td>操作</td>
                </tr>
            </tbody>
        </table>
        <div>
            <span> 共 {{ info.Hnum }} 数 ， 每 页 {{ data.pagesize }} 条 ， 共 {{ data.pageindex }} / {{ info.Ynum }} 页 </span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button value="首页" @click="getlist(1)">首页</button>&nbsp;
            <button value="上一页" @click="getlist(data.pageindex - 1)">上一页</button> &nbsp;
            <span v-for="a in info.Ynum"> {{ a }}&nbsp; </span>&nbsp;
            <button value="下一页" @click="getlist(data.pageindex + 1)">下一页</button>&nbsp;
            <button value="尾页" @click="getlist(info.Ynum)">尾页</button>&nbsp;
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router'
import moment from 'moment';
const router = useRouter();


onMounted(() => {
    show();
})

let data: any = ref({
    pageindex: 1,
    pagesize: 3,
})

let info: any = reactive({
    Hnum: 0,
    Ynum: 0,
    list: []
})

const getlist = (num: any) => {
    if (num < 1) {
        data.value.pageindex = 1;
        show();
        return;
    }
    if (num > info.Ynum) {
        data.value.pageindex = info.Ynum;
        show();
        return;
    }
    data.value.pageindex = num;
    show();
}

const show = () => {
    axios({
        url: 'https://localhost:7056/api/Discount/Showdis',
        method: 'get',
        params: data.value
    })
        .then((res) => {
            console.log(res.data);
            Object.assign(info, res.data);
        })
}
</script>

<style scoped></style>